<template>
    <div>
        <!-- 2. 通过vuex的辅助函数将vuex里变量当成本组件变量来使用 -->
        <p>{{num}}</p>
        <p>{{title}}</p>
        <hr>
        <p>{{dbNum}}</p>
        <hr>
         <button @click="addNum(10)">按钮</button>
        <button @click="asyncAddNum(20)">异步按钮</button>
    </div>
</template>

<script>
import { mapState,mapGetters, mapMutations, mapActions} from 'vuex'
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return {

        };
    },
    computed: {
        ...mapState(['num','title']),
        ...mapGetters(['dbNum'])
    },
    methods: {
       ...mapMutations(['addNum']),
       ...mapActions(['asyncAddNum'])
    },
};
</script>

<style scoped lang="less">

</style>
